<!--
 * @Author       : jiangxiaoying
 * @Date         : 2021-01-13 09:40:55
 * @LastEditors  : jiangxiaoying
 * @LastEditTime : 2021-01-15 10:08:09
 * @FilePath     : \cloud-components\docs\pages\components\cloud-skeleton\example6.vue
-->
<template>
  <div>
    <CloudButton @click="onChange()">change</CloudButton>
    <br />
    <br />
    <div class="skeleton-container">
      <CloudSkeleton
        v-for="(item, index) in list"
        :key="index"
        :loading="loading"
        active
        :avatar="SkeletonParagraphProps"
        :title="false"
        :paragraph="false"
      >
        <div class="card">
          <div class="img"></div>
          <div class="text">{{ item.text }}的业务应用</div>
        </div>
      </CloudSkeleton>
    </div>
  </div>
</template>
<script>
  export default {
    title: '6.云设计中心',
    data () {
      return {
        list: [
          {
            text: "111"
          },
          {
            text: "222"
          },
          {
            text: "333"
          }
        ],
        loading: true,
        SkeletonParagraphProps: {
          shape: 'square',
          size: 250
        }
      }
    },
    methods: {
      onChange () {
        this.loading = !this.loading
      }
    }
  }
</script>
<style lang="scss">
  .skeleton-container {
    display: flex;
    flex-wrap: nowrap;
    .card {
      margin-right: 80px;
      width: 218px;
      height: 249px;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #dedede;
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05);
      background: white;
      .text {
        height: 49px;
        display: flex;
        justify-content: center;
        align-content: center;
      }
    }
    .img {
      width: 218px;
      height: 200px;
      background: #e5e5e5;
    }
  }
</style>